<template>
	<div class="shopScorestyle">
		<h2>{{ datas.text }}</h2>
		<el-tabs type="border-card" :stretch="true">
			<el-tab-pane label="内容">
				<div class="decorate-card">
					<el-form label-width="auto" style="max-width: 600px">
						<div class="title">积分商城</div>
						<div>
							<div class="content">
								<div class="sd-flex sd-flex-wrap">
									<div class="goods-item" v-for="(item, index) in datas.goodsList" :key="index">
										<div class="sd-image sd-flex" style="width: 44px; height: 44px; border-radius: 4px">
											<el-image :src="STATIC_URL + item.image" fit="contain" />
										</div>
										<div class="goods-delete" @click="onDeleteGoods(index)">
											<SvgIcon name="ele-DeleteFilled"></SvgIcon>
										</div>
									</div>
								</div>
							</div>

							<el-button plain @click="onOpen" :icon="Plus" class="mb10">添加</el-button>
						</div>
						<div class="title">商品样式</div>
						<el-form-item label="选择风格">
							<el-radio-group v-model="datas.mode">
								<el-radio-button :label="1">
									<template #default>
										<span class="icon my-icon icon-shangxiabuju"></span>
									</template>
								</el-radio-button>
								<el-radio-button :label="2">
									<template #default><span class="icon my-icon icon-zuoyoujiegou"></span></template>
								</el-radio-button>
							</el-radio-group>
						</el-form-item>

						<el-form-item label="商品标题">
							<div class="flex">
								<el-input v-model="datas.goodsFields.title.color">
									<template #prepend>
										<el-color-picker v-model="datas.goodsFields.title.color" />
									</template>
								</el-input>
								<el-checkbox label="" size="large" class="ml15" :true-label="1" :false-label="0" v-model="datas.goodsFields.title.show" />
							</div>
						</el-form-item>

						<el-form-item label="副标题">
							<div class="flex">
								<el-input v-model="datas.goodsFields.subtitle.color">
									<template #prepend>
										<el-color-picker v-model="datas.goodsFields.subtitle.color" />
									</template>
								</el-input>
								<el-checkbox label="" size="large" class="ml15" :true-label="1" :false-label="0" v-model="datas.goodsFields.subtitle.show" />
							</div>
						</el-form-item>

						<el-form-item label="兑换颜色">
							<div class="flex">
								<el-input v-model="datas.goodsFields.score_price.color">
									<template #prepend>
										<el-color-picker v-model="datas.goodsFields.score_price.color" />
									</template>
								</el-input>
								<el-checkbox label="" size="large" class="ml15" :true-label="1" :false-label="0" v-model="datas.goodsFields.score_price.show" />
							</div>
						</el-form-item>

						<el-form-item label="原价">
							<div class="flex">
								<el-input v-model="datas.goodsFields.price.color">
									<template #prepend>
										<el-color-picker v-model="datas.goodsFields.price.color" />
									</template>
								</el-input>
								<el-checkbox label="" size="large" class="ml15" :true-label="1" :false-label="0" v-model="datas.goodsFields.price.show" />
							</div>
						</el-form-item>

						<div class="title">加购设置</div>
						<el-form-item label="加购按钮">
							<el-radio-group v-model="datas.buyNowStyle.mode">
								<el-radio :label="1">文字</el-radio>
								<el-radio :label="2">图片</el-radio>
							</el-radio-group>
						</el-form-item>

						<el-form-item label="图片" v-if="datas.buyNowStyle.mode == 2">
							<div class="choice-image choice-image-delete" @click="choiceFileImage">
								<el-image v-if="datas.buyNowStyle.src != ''" :src="STATIC_URL + datas.buyNowStyle.src" fit="contain" />
								<el-icon v-else>
									<ele-Plus />
								</el-icon>

								<div class="delete-content" @click.stop="datas.buyNowStyle.src = ''" v-if="datas.buyNowStyle.src != ''">
									<SvgIcon name="ele-DeleteFilled"></SvgIcon>
								</div>
							</div>
						</el-form-item>

						<div class="mb20" v-if="datas.buyNowStyle.mode == 1">
							<el-form-item label="文字">
								<el-input v-model="datas.buyNowStyle.text" />
							</el-form-item>
							<el-form-item label="背景1">
								<el-input v-model="datas.buyNowStyle.color1">
									<template #prepend>
										<el-color-picker v-model="datas.buyNowStyle.color1" />
									</template>
								</el-input>
							</el-form-item>
							<el-form-item label="背景2">
								<el-input v-model="datas.buyNowStyle.color2">
									<template #prepend>
										<el-color-picker v-model="datas.buyNowStyle.color2" />
									</template>
								</el-input>
							</el-form-item>
						</div>

						<div class="title">样式</div>
						<el-form-item label="上圆角">
							<div class="flex">
								<el-slider class="ml20" v-model="datas.borderRadiusTop" />
								<el-input class="ml20" v-model="datas.borderRadiusTop"></el-input>
							</div>
						</el-form-item>
						<el-form-item label="下圆角">
							<div class="flex">
								<el-slider class="ml20" v-model="datas.borderRadiusBottom" />
								<el-input class="ml20" v-model="datas.borderRadiusBottom"></el-input>
							</div>
						</el-form-item>
						<el-form-item label="间距">
							<div class="flex">
								<el-slider class="ml20" v-model="datas.space" />
								<el-input class="ml20" v-model="datas.space"></el-input>
							</div>
						</el-form-item>
					</el-form>
				</div>

				<!-- 表单 -->
			</el-tab-pane>
			<el-tab-pane label="样式">
				<DataStyle :datas="datas.dataStyle"></DataStyle>
			</el-tab-pane>
			<el-tab-pane label="数据">
				<StyleComponentData :datas="datas"></StyleComponentData>
			</el-tab-pane>
		</el-tabs>
		<ScoreDialog ref="ScoreDialogRef" @choice="onChoice"></ScoreDialog>
		<FileChoice ref="FileChoiceRef" @choice-file="choiceFileCallBack"></FileChoice>
	</div>
</template>

<script setup lang="ts" name="shopScorestyle">
import { defineAsyncComponent, ref } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import { STATIC_URL } from '/@/utils/config';
import { goodsApi } from '/@/api/goods/index';
import _ from 'lodash';
const ScoreDialog = defineAsyncComponent(() => import('/@/views/shop/activity/score/choice/index.vue'));
const FileChoice = defineAsyncComponent(() => import('/@/views/file/choice/index.vue'));
const ScoreDialogRef = ref();
const FileChoiceRef = ref();
const props = defineProps({
	datas: {},
});
const onOpen = () => {
	ScoreDialogRef.value.onOpen();
};
const onChoice = async (shopScores: ChoiceShopScore[]) => {
	console.log('shopScore: ', shopScores);

	props.datas.goodsList.push(...shopScores);
};

const choiceFileImage = () => {
	FileChoiceRef.value.openFileChoiceDialog();
};

const choiceFileCallBack = (cfi: ChoiceFileInfo[]) => {
	console.log('cfi: ', cfi);
	props.datas.buyNowStyle.src = cfi[0].visitRelativePath;
};

const onDeleteGoods = (index: number) => {
	props.datas.goodsList.splice(index, 1);
};
</script>

<style scoped lang="scss">
.shopScorestyle {
	width: 100%;
}

.el-tabs--border-card {
	:deep(.el-tabs__content) {
		padding: 0px !important;
	}

	border: 0px;

	:deep(.el-tabs__header) {
		background-color: #d9d9d9 !important;
	}
}

:deep(.el-input-group__prepend) {
	padding: 0px !important;
}

:deep(.el-color-picker__trigger) {
	padding: 0px;
}

:deep(.el-color-picker__color) {
	border: 0px;
}
</style>
